<template>
  <div class="app">
    <div class="car-top">
      <span class="iconfont icon-shoutibao"></span>
      <span>Shopping cart</span>
    </div>
    <div class="car-center">
      <div v-for="item in $store.state.userCar" :key="item.id">
        <img :src="$store.state.url + item.goods_coverimg" alt="" />
        <span @click="goDetails(item.goods_id)" class="name">
          {{ item.goods_name }}
        </span>
        <span>{{ item.goods_size }}</span>
        <span>￥{{ item.goods_price }}×{{ item.goods_count }}</span>
      </div>
    </div>
    <div class="car-btm">
      <div class="btm-top">
        <span>合计：</span>
        <span>￥{{ cartotel() }}</span>
      </div>
      <div class="btm-btm">
        <slot name="gocar"></slot>
        <slot name="gopay"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  mounted() {},

  methods: {
    cartotel() {
      let totle = this.$store.state.userCar.reduce((a, b) => {
        return b.goods_price * b.goods_count + a;
      }, 0);
      return totle.toFixed(2);
    },
    goDetails(goodsid) {
      this.$router.push({ path: `/goodscontent?id=${goodsid}` });
      this.$store.commit("alertModelcar");
      setTimeout(() => {
        this.$store.commit("alertisCarclic");
      }, 200);
    },
  },
  filters: {
    tool(n1, n2) {
      return n1 + n2;
    },
  },
};
</script>
<style lang="scss" scoped>
.app {
  width: 0;
  height: 0;
  transition: all 0.4s;
  overflow: hidden;
  border-top: 1px solid rgb(231, 229, 229);
  background-color: white;
  .car-top {
    height: 110px;
    line-height: 110px;
    border-bottom: 1px solid rgb(180, 177, 177);
    color: rgb(168, 164, 164);
    // background-color: antiquewhite;
  }
  .car-top span:first-child {
    font-size: 30px;
  }
  .car-center {
    height: 250px;
    overflow: scroll;
    img {
      width: 70px;
    }
  }
  .car-center > div {
    display: flex;
    width: 100%;
    line-height: 50px;
    height: 50px;
    color: rgb(128, 122, 122);
    justify-content: space-around;
    .name:hover {
      color: black;
      cursor: pointer;
    }
  }
  .btm-top,
  .btm-btm {
    width: 500px;
    height: 70px;
    text-align: center;
    line-height: 70px;
  }
  a{
    text-decoration: none;
    color: black;
  }
}
.btm-btm span:first-child {
  background-color: #333333;
  color: white;
  flex: 2;
}
.btm-btm span:last-child {
  background-color: #ffe32a;
  flex: 2;
}
.app div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>